<template>
  <div class="all">
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar title="网易严选" left-arrow>
        <template #left>
          <van-icon name="wap-home-o" size="70" color="black" />
        </template>
        <template #right>
          <van-icon name="search" size="70" class="top" color="black" />
          <van-icon
            name="shopping-cart-o"
            size="70"
            class="top"
            color="black"
            badge="9"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="light"></div>
    <!-- 地址 -->
    <div class="address">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        add-button-text="提交订单"
      />
    </div>

    <!-- 优惠券 -->
    <div class="Coupons">
      <div class="couponsInfo">
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
        <!-- 礼品卡余额 -->
        <div class="giftCards">
          <div class="giftLeft">
            <van-radio-group v-model="radio" class="gittLeft1">
              <van-radio name="1" shape="square" disabled class="giftLeft2"

                >礼品卡余额：&nbsp;&nbsp;￥0.00</van-radio

                >礼品卡余额:￥.00</van-radio

              >
            </van-radio-group>
            <div class="giftLeft3"><van-icon name="arrow" /></div>
          </div>
        </div>
        <!-- 余额 -->
        <div class="giftCards">
          <div class="giftLeft">
            <van-radio-group v-model="radio" class="gittLeft1">
              <van-radio :name="1" shape="square" disabled class="giftLeft2"

                >余额：&nbsp;&nbsp;￥0.00</van-radio

                >余额:￥0.00</van-radio

              >
            </van-radio-group>
            <div class="giftLeft3"><van-icon name="info-o" /></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品合计 -->
    <div class="Coupons">
      <div class="couponsInfo">
        <!-- 商品合计 -->
        <div class="giftCards">
          <div class="giftLeft">
            <div class="gittLeft1">商品合计</div>
            <div class="giftLeft4">￥190.00</div>
          </div>
        </div>
        <!-- 邮费 -->
        <div class="giftCards">
          <div class="giftLeft">
            <div class="gittLeft1">邮费</div>
            <div class="giftLeft4"><van-icon name="info-o" />￥8.00</div>
          </div>
        </div>
        <!-- 活动优惠 -->
        <div class="giftCards">
          <div class="giftLeft">
            <div class="gittLeft1">活动邮费<van-icon name="info-o" /></div>
            <div class="giftLeft4">-￥51.10</div>
          </div>
        </div>
        <!-- 优惠券 -->
        <div class="giftCards">
          <div class="giftLeft">
            <div class="gittLeft1">优惠券</div>
            <div class="giftLeft4">-￥0.00</div>
          </div>
        </div>
        <!-- 我要开发票 -->
        <div class="giftCards">
          <div class="giftLeft">
            <div class="gittLeft1">
              <van-radio-group v-model="radio">
                <van-radio name="2" shape="square">我要开发票</van-radio>
              </van-radio-group>
            </div>
            <div class="giftLeft3"><van-icon name="arrow" /></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交订单 -->
    <div><van-submit-bar :price="3050" button-text="提交订单" /></div>
  </div>
</template>

<script>
import Vue from "vue";
import { AddressList } from "vant";
import { CouponCell, CouponList } from "vant";
import { RadioGroup, Radio } from "vant";
import { SubmitBar ,Toast} from "vant";

Vue.use(AddressList);
Vue.use(CouponCell);
Vue.use(CouponList);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(SubmitBar);
Vue.use(Toast)

const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
export default {
  name: "order",
  data() {
    return {
      radio: "1",
      chosenAddressId: "1",
      list: [
        {
          id: "1",
          name: "李硕",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
      ],
      chosenCoupon: -1,
      coupons: [],
      disabledCoupons: [],
      showList: "",
    };
  },
  methods: {
    onAdd() {
      Toast("新增地址");
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
    },
    //显示与隐藏showList
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
  },
};
</script>

<style lang="less" scoped>
.light {
  width: 100%;
  height: 10px;
  background: linear-gradient(145deg, #dc1010, #90ed5a, #2f5fe8);
}
.address {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  box-shadow: 0 10px 0px #eee;
}
.Coupons {
  box-shadow: 0 10px 0px #eee;
}
.couponsInfo {
  margin-left: 15px;
}
//礼品卡余额
.giftCards {
  border-top: 2px solid #eee;
  .giftLeft {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    .gittLeft1 {
      margin-top: 16px;
      margin-left: 15px;
      margin-bottom: 16px;
    }
    .giftLeft3 {
      margin-top: 16px;
      margin-right: 16px;
      margin-bottom: 16px;
      color: grey;
    }
  }
}
.giftLeft4 {
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  color: grey;
  color: black;
}
</style>
